<template>
	<view class="calendar-top">
		<view class="calendar-top-box">
			<view class="swiper-calendar-wrp">
				<scroll-view class="calendar-wrp" id="the-id" :scroll-into-view="scrollViewId" lower-threshold="50" :scroll-left="scrollLeft"
				 scroll-with-animation="true" scroll-x="true" upper-threshold="50">
					<view @click="calendarItemTap(item,index)" :id="'cal'+index" :class="'calendar-wrp-item '+[item.active?'calendar-active ':'']+[item.disabled?'calendar-disabled ':'']"
					 v-for="(item,index) in swiperDates" :key="index">
						<view class="item-wrp">
							<view class="date">{{item.monthDay}}</view>
							<view class="week fw-bold">{{item.week}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view @click="allCalendarTap" class="calendar-link fw-bold">
				<view>全部</view>
				<view>日历</view>
				<view class="iconfont iconjipiaoxiaoxiala"></view>
			</view>
		</view>

	</view>

</template>

<script>
	var util = require('@/common/js/util.js');
	var _getDiffDate = util.getDiffDate;
	var _addDay = util.addDay;
	var _dateDiff = util.dateDiff;
	var _parseDate = util.parseDate;
	var _formatDate = util.formatDate
	export default {
		props: {
			saleDate: {
				type: String,

			},
			dptDate: {
				type: String,

			},
		},
		data() {
			return {
				swiperDates: [],
				scrollLeft: 0,
				swiperItemWidth: 55,
				scrollViewId: ''
			};
		},
		watch: {
			dptDate() {
				this.getSaleDaysDate(this.saleDate);
			}
		},
		mounted() {
			this.getSaleDaysDate(this.saleDate);
			// this.swiperCalendarDates();
		},
		methods: {
			getSaleDaysDate: function(e) {
				var that = this,
					u = _getDiffDate(_formatDate("yyyy-MM-dd"), e).length,
					s = _getDiffDate(_formatDate("yyyy-MM-dd"), e),
					o = 0,
					d = [];
				// 预售日期不足六天 补足
				console.log(22222,u)
				if (u < 6) {
					o = 6 - u;
					var f = _addDay(o, e).day,
						c = _addDay(1, e).day,
						D = _getDiffDate(c, f) || [];
					s = [].concat(s, D);
				}

				s.map(function(e, t) {
					var i = _dateDiff(e).replace("星期", "周"),
						r = {
							date: e,
							monthDay: _formatDate(_parseDate(e), "MM/dd"),
							week: i,
							disabled: !1,
							active: !1
						};
					o > 0 && t >= u && (r.disabled = !0), d.push(r);
				})



				that.swiperDates = d


				try {
					that.getNodesFields(0);
				} catch (e) {
					console.log("TCL: getNodesFields -> error", e);
				}

				that.swiperCalendarDates(that.dptDate);


			},
			getNodesFields: function() {
				var e = this,
					t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
					a = arguments.length > 1 ? arguments[1] : void 0;
				uni.createSelectorQuery().select("#cal".concat(t)).fields({
					dataset: !0,
					size: !0,
					context: !0
				}, function(t) {
					if (t) {
						var i = t.width;
						e.swiperItemWidth = i || 55
					}
					a && "function" == typeof a && a(t);
				}).exec();
			},
			swiperCalendarDates: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
					t = arguments.length > 1 ? arguments[1] : void 0,
					a = this,
					i = 0,
					r = a.dptDate || "";
				a.swiperDates.map(function(t, a) {
						t.active = !1, t.date != e && a != e || (t.active = !0, i = a, r = t.date);
					}),

					this.setScrollLeft(i), t && "function" == typeof t && t({
						date: r,
						index: i
					});

			},
			setScrollLeft: function(e) {
				var t = this;
				t.scrollLeft = t.swiperItemWidth * (e - 2) + 1


			},
			calendarItemTap: function(e, index) {
				var t = this,
					a = index,
					r = this;
				r.swiperDates[a].disabled ? uni.showToast({
					title: '不在预售范围内',
					duration: 2000
				}) : r.swiperDates[a].active || this.swiperCalendarDates(a, function(e) {
					var a = e.date || r.dptDate;
					// t.triggerEvent("handlerCalendar", {
					// 	currentDate: a
					// });
					t.$emit("handlerCalendar", {
						currentDate: a
					});
				});
			},
			allCalendarTap: function() {
				this.$emit("handlerAllCalendar");
			},
		}
	}
</script>


<style>
/* 	page {
		background-color: #ddd;
	} */

	.calendar-top {
		background: #fff;
	}

	.calendar-top-box {
		display: flex;
		/* overflow: hidden; */
		border-radius: 5px;
	}

	.swiper-calendar-wrp {
		flex: 1;
		overflow: hidden;
		background: #fff;
		position: relative;
	}

	.swiper-calendar-wrp::before {
		content: " ";
		position: absolute;
		left: -2rpx;
		top: 0;
		height: 100rpx;
		width: 1rpx;
		background: #fff;
		box-shadow: 10rpx 0rpx 25rpx 10rpx #/2e79df;
	}

	.swiper-calendar-wrp::after {
		content: " ";
		position: absolute;
		right: -2rpx;
		top: 0;
		height: 100rpx;
		width: 1rpx;
		background: #a6b0bb;
		box-shadow: -1px 0px 15px 2px #9db4d0;
	}

	.calendar-link {
		width: 88rpx;
		height: 100rpx;
		font-size: 24rpx;
		background: #fff;
		color: #2f2727;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15rpx 0;
		flex-direction: column;
		box-sizing: border-box;
		margin-top: 5px;
	}

	.calendar-link view {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.calendar-link-arrow {
		width: 20rpx;
		height: 10rpx;
		margin-top: 5rpx;
	}

	.calendar-wrp {
		/* height: 100rpx; */
		white-space: nowrap;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.calendar-wrp-item {
		width: 112rpx;
		height: 100rpx;
		font-size: 24rpx;
		display: inline-block;
		text-align: center;
		position: relative;
		margin: 5px;
		border-radius: 5px;
	}

	/* .calendar-wrp-item::after {
    content: " ";
    height: 80rpx;
    width: 0.5px;
    border-right: 1rpx #e5e5e5 solid;
    position: absolute;
    right: -1rpx;
    top: 8rpx;
} */

	.calendar-wrp-item:last-child::after {
		display: none;
	}

	.item-wrp {
		display: flex;
		height: 100%;
		flex-direction: column;
		box-sizing: border-box;
		color: #2f2727;
		border: 1rpx #DEE4E7 solid;
		border-radius: 8rpx;
		justify-content: center;
	}

	.calendar-wrp-item .date {
		/* padding-top: 19rpx; */
		font-size: 24rpx;
	}

	.calendar-wrp-item .week {
		padding-top: 5rpx;
		font-size: 28rpx;
	}

	.calendar-active .item-wrp {
		background: #fff;
		color: #FC4141;
		border-radius: 8rpx;
		border: 1rpx #FC4141 solid;
		justify-content: center;
	}

	.calendar-active::after {
		display: none;
	}

	.calendar-disabled .item-wrp {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 8rpx;
		color: #2f2727;
		justify-content: center;
	}

	.line-type__hover {
		border-color: #186ee7;
		background: #f5f5f5;
	}

	.calendar-chartered-top {
		background-color: #fff;
		padding: 0;
	}

	.calendar-chartered-top .swiper-calendar-wrp {
		background-color: #fff;
	}

	.calendar-chartered-top .item-wrp {
		color: #333333;
	}

	.calendar-chartered-top .calendar-wrp-item::after {
		border-right: 1rpx #DEE4E7 solid;
	}

	.calendar-chartered-top .calendar-link {
		color: #333333;
		background-color: #fff;
		padding: 10rpx 0;
	}

	.calendar-chartered-top .swiper-calendar-wrp::before {
		box-shadow: 10rpx 0rpx 25rpx 10rpx #DEE4E7;
		background-color: #DEE4E7;
	}

	.calendar-chartered-top .swiper-calendar-wrp::after {
		box-shadow: 2rpx 0rpx 30rpx 10rpx #DEE4E7;
		background-color: #DEE4E7;
	}

	.calendar-chartered-top .calendar-active .item-wrp {
		background: #5F9DF1;
		color: #fff;
	}

	.calendar-chartered-top .calendar-wrp-item .date,
	.calendar-chartered-top .calendar-wrp-item .week {
		font-size: 26rpx;
	}

	.animate {
		z-index: 9999;
		animation: mymove 1s linear;
		animation-delay: 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes mymove {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@-webkit-keyframes mymove {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>
